<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>前端实训</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet" />
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
  <script src="public/libs/laydate/laydate.js"></script>
</head>
<body>
  <h1 class="text-4xl my-7 text-center text-red-400">
    Front-end training 
  </h1>
  <div class="flex justify-center items-center my-6">
    <i class="fa fa-calendar mr-2"></i>
    <input style="width: 90px" class="block text-center underline border-0 outline-none cursor-pointer" readonly
      type="text" id="datePicker" />
  </div>

  <div class="my-6 flex justify-center">
    <button
      class="demo mr-4 inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg focus:ring-4">
      知识点示例
    </button>
    <button
      class="work ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg focus:ring-4">
      作业示例
    </button>
  </div>

  <script>
    const baseUrl = 'https://guangzan.gitee.io/front-end-training/'
    const getToday = () => {
      const date = new Date()
      const m = date.getMonth()
      const d = date.getDate()
      const month = m + 1 < 10 ? `0${m + 1}` : m + 1
      const day = d < 10 ? `0${d}` : d
      const today = `${date.getFullYear()}-${month}-${day}`
      return today
    }
    const today = getToday()



    const getDemoUrl = (date) => baseUrl + date + '/demo'
    const getWorkUrl = (date) => baseUrl + date + '/work'
    const jump = (url) => location.href = url

    const AddClickToDemo = (date) => {
      const demoUrl = getDemoUrl(date)
      const demoElement = document.querySelector('.demo')
      demoElement.addEventListener('click', () => {
        jump(demoUrl)
      })
    }

    const AddClickToWork = (date) => {
      const workUrl = getWorkUrl(date)
      const demoElement = document.querySelector('.work')
      demoElement.addEventListener('click', () => {
        jump(workUrl)
      })
    }

    const initDatePicker = () => {
      window.laydate.render({
        elem: '#datePicker',
        position: 'abolute',
        btns: ['now', 'confirm'],
        value: today,
        done(date) {
          AddClickToDemo(date)
          AddClickToWork(date)
        },
      })
    }

    window.onload = () => {
      AddClickToDemo(today)
      AddClickToWork(today)
      initDatePicker()
    }
  </script>
</body>
</html>
